<template>
  <div>
    <el-card>
      <div slot="header"
        :class="$style.header">
        <div :class="$style.search">
          <span>用户名：</span>
          <el-input v-model="name"
            placeholder="请输入"
            clearable
            @clear="filterChange" />
        </div>
        <el-button type="primary"
          @click="filterChange">
          搜索<i class="el-icon-search"></i>
        </el-button>
      </div>
      <el-table :data="tabelDtata">
        <el-table-column label="用户名">
          <template slot-scope="{row}">
            {{row.member_id}}
          </template>
        </el-table-column>

        <el-table-column label="金额"
          align="center">
          <template slot-scope="{row}">
            {{(parseFloat(row.money)).toFixed(2)}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间"
          align="center">
          <template slot-scope="{row}">
            {{row.create_time}}
          </template>
        </el-table-column>

        <el-table-column label="备注"
          align="center">
          <template slot-scope="{row}">
            {{row.remark}}
          </template>
        </el-table-column>
      </el-table>
      <BasePagination :max="maxPage" :now.sync="nowPage"></BasePagination>
    </el-card>
  </div>
</template>
<script>
import BasePagination from "@/components/BasePagination";
export default {
  components:{
    BasePagination
  },
  data() {
    return {
      name: '',
      tabelDtata: [
        {
          id: 1,
          name: '王野',
          money: 1000.0,
          time: '2020-03-22',
          remarks: '这个人很厉害'
        },
        {
          id: 2,
          name: '林夏',
          money: 500.0,
          time: '2019-10-22',
          remarks: '这个人有点厉害'
        },
        {
          id: 3,
          name: 'suye',
          money: 0.0,
          time: '2019-03-22',
          remarks: '这个人不厉害'
        }
      ],
      maxPage: 1,
      nowPage: 1
    }
  },
  created(){
    this.getData();
  },
  methods:{
    filterChange(){
      this.nowPage = 1　? this.getData(): (this.page = 1)
    },
    getData(){
      this.$http
      .get('/Manage/member_recharge/lists',{
        params:{
          page:this.nowPage,
          rows:10,
          keywords:this.name,
        }
      })
      .then(res=>{
        this.tabelDtata = res.data.list;
        this.maxPage = res.data.page_total;
      })
    }  
  },
}
</script>
<style lang="scss" module>
.header {
  display: flex;
  align-items: center;

  > div {
    flex-grow: 0;
    flex-shrink: 0;

    &:not(:last-child) {
      margin-right: 20px;
    }

    > span {
      margin-right: 5px;
    }
  }

  .search {
    display: flex;
    align-items: center;

    > div {
      width: 200px;
    }
  }

  [space] {
    flex-grow: 1;
  }
}
</style>



